<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->

	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="js/ext/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
	  .el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	    min-height: 400px;
	  }
	</style>
	<style>
		table {
			border-collapse: collapse;
			text-align:center
		}

		table, td, th {
			border-top: 1px solid black;
			border-bottom:1px solid black;
		}
			td ,th
		{
			padding:10px 60px;
			
		}
	</style>
	<script src="js/service.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
			  <el-radio-button :label="false">展开</el-radio-button>
			  <el-radio-button :label="true">收起</el-radio-button>
			</el-radio-group>
			<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
			  <el-submenu index="1">
			    <template slot="title">
			      <i class="el-icon-coin"></i>
			      <span slot="title">数据表</span>
			    </template>

			    <el-submenu index="1-1" >
			      <span slot="title">樊康</span>
			      <el-menu-item index="1-1-1" @click="dialogTableVisible = true">查询总条数</el-menu-item>
			      <el-menu-item index="1-1-2" @click="dialogTableVisible = true">返回条数最多的关键词</el-menu-item>
				  <el-menu-item index="1-1-3" @click="dialogTableVisible = true">查询非重复条数</el-menu-item>
			    </el-submenu>
			    <el-submenu index="1-2">
				  <span slot="title">付龙</span>
			      <el-menu-item index="1-2-1" @click="dialogTableVisible = true">独立UID条数</el-menu-item>
				  <el-menu-item index="1-2-2" @click="dialogTableVisible = true">结果选择排名</el-menu-item>
				  <el-menu-item index="1-2-3" @click="dialogTableVisible = true">查询频度前10</el-menu-item>
			    </el-submenu>
			
				<el-submenu index="1-3">
					<span slot="title">刘泰奇</span>
				  <el-menu-item index="1-3-1" @click="dialogTableVisible = true">查询次数大于2的用户总数</el-menu-item>
				  <el-menu-item index="1-3-2" @click="dialogTableVisible = true">搜索排名为1的点击数</el-menu-item>
				  <el-menu-item index="1-3-3" @click="dialogTableVisible = true">直接搜索url的用户数</el-menu-item>
				
				</el-submenu>
				<el-submenu index="1-4">
				  <span slot="title">刘佳凯</span>
				  <el-menu-item index="1-4-1" @click="dialogTableVisible = true">搜索过“淘宝”的uid以及次数</el-menu-item>
				  <el-menu-item index="1-4-2" @click="dialogTableVisible = true">时间段搜索数</el-menu-item>
				  <el-menu-item index="1-4-3" @click="dialogTableVisible = true">淘宝关键词排名</el-menu-item>
				</el-submenu>
				
			  </el-submenu>
			  <el-submenu index="2">
			 <template slot="title">
			    <i class="el-icon-menu"></i>
			    <span slot="title">可视化</span>
			 </template>
			 <el-submenu index="2-1">
			   <span slot="title">樊康</span>
			   <el-menu-item index="2-1-1" @click="canves = true">高频关键词</el-menu-item>
			 </el-submenu>
			 <el-submenu index="2-2">
			   <span slot="title">付龙</span>
			   <el-menu-item index="2-2-1" @click="canves = true">时间段查询数</el-menu-item>
			 </el-submenu>
			 <el-submenu index="2-3">
			   <span slot="title">刘太奇</span>
			   <el-menu-item index="2-3-1" @click="canves = true">直接URL查询占比</el-menu-item>
			 </el-submenu>
			 <el-submenu index="2-4">
			   <span slot="title">刘佳凯</span>
			   <el-menu-item index="2-4-1" @click="canves = true">点击占比</el-menu-item>
			 </el-submenu>
			  </el-submenu>
			</el-menu>

		<el-dialog  
		 
		 :visible.sync="dialogTableVisible" @open="myDialong">
			<div slot="title" class="dialog-title">{{tablename}}</div>
		  <table v-loading="fullscreenLoading"   id="mytable" align="center"  border="0" cellspacing="1" cellpadding="4"  style="text-align: center;">	</table>
		</el-dialog>

		<el-dialog   :visible.sync="canves" @open="setDrawindex" @opened="opencanves">
			<div v-loading="fullscreenLoading"  element-loading-text="数据加载中" id="draw" style="width: 800px;height:400px;">
				
			</div>
		</el-dialog>
		
		
		
		
		</div>
		
		<!-- from -->

	</body>
  <script>
    new Vue({
      el: '#app',
          data() {
            return {
              isCollapse: true ,
			  dialogTableVisible: false,
			  ialogFormVisible: false,
			  tablename:"" ,
			  canves:false ,
			  drawindex:0 ,
			  fullscreenLoading:false

			  
            };
          },
          methods: {
            handleOpen(key, keyPath) {
              console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
              console.log(key, keyPath);
            },
			myDialong(){
				this.fullscreenLoading  = true
				let indexlist = event.currentTarget.__vue__.index.split("-") ;
				this.tablename = event.currentTarget.innerHTML;
				loadData(sqllist[(parseInt(indexlist[1])-1)*3+parseInt(indexlist[2])-1] ,this);
			} ,
			setDrawindex(){
				this.drawindex = event.currentTarget.__vue__.index.split("-")[1]
			},
			opencanves() {
				this.fullscreenLoading = true
				drawing(this.drawindex , this)
				
			}
			
          }
    })
  </script>
</html>
